<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        商城管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>机构库存统计
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="formInline" label-width="80px">
            <el-form-item label="归属OEM">
              <el-input
                v-model="formInline.oemName"
                placeholder="请输入归属OEM"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属机构">
              <el-input
                v-model="mechanism"
                @focus="selectInstitution"
                readonly
                placeholder="请输入归属机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                v-model="formInline.officeName"
                placeholder="请输入机构名"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                v-model="formInline.officePhone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="品牌名称">
              <el-select
                class="appointVip"
                v-model="formInline.channelUid"
                placeholder="请选择品牌"
                @change="pinChange"
              >
                <el-option
                  v-for="(val, index) in paizi"
                  :label="val.channelName"
                  :value="val.uid"
                  :key="index"
                ></el-option
              ></el-select>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="formInline.productName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button v-if="isAuth('invenStatisticsSearch')" type="primary" @click="queryPayActiveLists">搜索</el-button>
          <el-button v-if="isAuth('invenStatisticsReset')" type="" @click="reset">重置</el-button>
          <el-button
            type="primary"
            class="butt"
            style="margin-left:40px"
            @click="record"
            v-if="isAuth('warehousing')"
            >出入库记录</el-button>
          <el-button v-if="totalNum>0" type="primary" @click="payActiveListExport" class="butt">批量导出</el-button>
        </div>
        <div class="table">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            border
            @selection-change="handleSelectionChange"
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '0px' }"
            v-loading="listLoading"
          >
            <el-table-column type="selection" min-width="30"></el-table-column>
            <el-table-column
              prop="oemName"
              min-width="150"
              label="归属OEM"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="parentName"
              min-width="150"
              label="归属机构"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="officeName"
              min-width="150"
              show-overflow-tooltip
              label="机构名称"
            ></el-table-column>
            <el-table-column
              prop="officePhone"
              min-width="100"
              label="手机号"
            ></el-table-column>
            <el-table-column
              prop="channelName"
              min-width="150"
              label="品牌名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="productNo"
              min-width="80"
              show-overflow-tooltip
              label="商品型号"
            ></el-table-column>
            <el-table-column
              prop="productName"
              min-width="150"
              show-overflow-tooltip
              label="商品名称"
            ></el-table-column>
            <el-table-column
              prop="leftCnt"
              min-width="100"
              label="库存总量"
            ></el-table-column>
            <el-table-column
              prop="openStatusNum"
              min-width="100"
              label="已激活"
            ></el-table-column>
            <el-table-column
              prop="notOpenStatusNum"
              min-width="100"
              label="未激活"
            ></el-table-column>
            <el-table-column
              prop="buyNumber"
              min-width="100"
              label="购买总量"
            ></el-table-column>
          </el-table>
        </div>
        
        <el-pagination
          background
          style="text-align: right; padding:0 20px; "
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-size="formInline.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>

    <Tree :showType="showType" @func="transmit" />
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from "qs";
import axios from "axios"
import Tree from "../tree/index"
// 批量导出
import { exportFile } from "../../plugins/expord"
export default {
  data() {
    return {
      shelvesId: "",
      titles: "",
      mechanism:null,
        showType:false,
      shelves: {},
      dialogVisible: false,
      NameList: [],
      BrandTypeList: [],
      productListData: [],
      listDetailsShow: false,
      addInventoryShow: false,
      recordsShow: false,
      channelUid: "",
      listLoading: false,
      Sid: "",
      jurisdiction: "",
      formInline: {
        oemUid:localStorage.getItem("uid"),
        status: "",
        startDate: "",
        endDate: "",
        page: 1,
        number: 20,
        BrandType: "",
        channelUid: "",
        productUid: "",
        productCode: "",
        idList:[],
        // oemUid: localStorage.getItem('uid'),
        officeUid: "", //机构ID
        organizationName: "", //机构名
      },
      dataTime: [],
      channelTypeList:[],
      optionsBrandTypeNum:[],
      eventShow: false,
      machinesShow: false,
      dialogVisible: false,
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      activityType: 1,
      activeUid: "",
      from: false,
      SelectData:[]
    };
  },
  components: {
    Tree
  },
  created(){
    let _this=this
        https.mallBrand({oemUid: localStorage.getItem("uid")})
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.paizi = d.data.data;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {});
  },
  mounted() {
    this.queryPayActiveList();  //展示列表
    this.jurisdiction = localStorage.getItem("jurisdiction");   //权限字段获取
  },
  methods: {
    // 多选
     handleSelectionChange(val) {
      this.SelectData = val;
    },
    //批量导出
    payActiveListExport() {
      if(this.SelectData.length>0){
        for (let i = 0; i < this.SelectData.length; i++) {
        //  let pl = { snUid: +this.SelectData[i].id };
          this.formInline.idList.push(+this.SelectData[i].id);
        }
      }else{
        this.formInline.idList=[]
      }
      var _this = this;
      exportFile("/api/mall/stocktatisticsList/excel/export",_this.formInline,"机构库存统计")
    },
    // 列表
    queryPayActiveList(){
      this.SelectData=[]
      https.stocktatisticsList(this.formInline).then(res=>{
        console.log(res.data.total)
        this.tableData=res.data.data
        this.totalNum=res.data.total
      })
    },
     selectInstitution() {
      this.showType = true;
    },
    //   归属机构点击
    transmit(data) {
      //归属机构名字
      this.mechanism = data.name
      this.formInline.officeUid = data.uid
    },
     //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },
    // 出入库记录
    record(){
      this.$router.push("warehousing")
    },
    queryPayActiveLists(){
      this.formInline.page=1
      this.queryPayActiveList();
    },
    //每页几条数据
    handleSizeChange(val) {
      this.SelectData=[]
      this.formInline.number = val; //动态改变
      this.formInline.page = 1;
      this.queryPayActiveList();
    },
    queryAgentInfos() {
      this.SelectData=[]
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList();
    },
    //当前页
    handleCurrentChange(val) {
      this.SelectData=[]
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },
    // 重置
    reset(){
      this.formInline.officeName=""
      this.formInline.oemName=""
      this.formInline.channelUid=""
      this.formInline.officePhone=""
      this.formInline.productUid=""
      this.formInline.productName=""
      this.formInline.officeUid = "";
      this.formInline.page=1
      this.mechanism = "";
      this.queryPayActiveList();
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}

.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
</style>
